
	var map;
	var ruta;

	  var hull;
	  
	  var path = new Array();
	  
      var markers = [];
      var markersRuta = [];
      
      var gpoly ;
      var gpath;
      
      function initialize() {
		
     	gpoly = null;
     	gpath = null;
        var properties = {
          center: new google.maps.LatLng(-12.0000, -77.0000),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        map = new google.maps.Map(document.getElementById("map_canvas"),
            properties);
        ruta = new google.maps.Map(document.getElementById("map_canvas2"),
            properties);
        
 	 	google.maps.event.addListener(ruta, 'click', function(event) {
		    pathMarker(event.latLng, 0);
		  });
         
     	 google.maps.event.addListener(map, 'click', function(event) {
		    placeMarker(event.latLng, 0);
		  });
      }
         
      
      
      function pathMarker(location, id) {
		  
		  var marker = new google.maps.Marker({
			  position: location,
			  map: ruta
		  });
		  google.maps.event.addListener(marker, 'click', function(event) {
			  
		  	  if ( markersRuta.length != 0 ) {
		  	  	  var flag = false;
				  for( var i = 0; i < markersRuta.length; i++){
				  	if (markersRuta[ i ].position == location) {
				  		flag = true;
				  	}
				  	if ( flag ) {
						if ( i + 1 < markersRuta.length ) markersRuta[ i ] = markersRuta[ i + 1 ];				  	
				  	}
				  }
				  markersRuta.length = markersRuta.length - 1;
			  }		
		  	  
			  marker.setMap( null );
			  pathing();
		  });
		  markersRuta.push( marker );
		  
		  ruta.setCenter(location);
		  if ( id == 0 ) pathing();
	   }
   
      
      function placeMarker(location,id) {
		  
		  var marker = new google.maps.Marker({
			  position: location,
			  map: map
		  });
		  google.maps.event.addListener(marker, 'click', function(event) {
			  
		  	  if ( markers.length != 0 ) {
		  	  	  var flag = false;
				  for( var i = 0; i < markers.length; i++){
				  	if (markers[ i ].position == location) {
				  		flag = true;
				  	}
				  	if ( flag ) {
						if ( i + 1 < markers.length ) markers[ i ] = markers[ i + 1 ];				  	
				  	}
				  }
				  markers.length = markers.length - 1;
			  }		    
			  marker.setMap( null );
			  hulling();
		  });
		  markers.push( marker );
		  
		  //map.setCenter(location);
		  if ( id == 0 )  hulling();
	   }
	   function hulling(){
			if ( gpoly != null || markers.length < 3)
		   		gpoly.setMap(null);
			if ( markers.length < 3 ){
				return;	
			}			

			var poly = [];
			var points = new Array();
			for( var i = 0 ; i < markers.length ; i++){
				points[ i ] = new Point();
				points[ i ].setPoint( markers[i].position.lat(),  markers[i].position.lng()  );
			}

			hull = convexHull( points );
			
			for( var i = 0 ; i < hull.length ; i++){
				poly.push( new google.maps.LatLng( hull[i].x,  hull[i].y  ) );
			}
			var center = getCenterMass( hull );
		    var color =  $('#color').val(); 
		    
		  	gpoly = new google.maps.Polygon({
				paths: poly,
				strokeColor: color,
				strokeOpacity: 0.8,
				strokeWeight: 2,
				fillColor: color,
				fillOpacity: 0.35
		    });
		
		
			google.maps.event.addListener(gpoly, 'click', function(event) {
			    placeMarker(event.latLng, 0);
			});
			
		    gpoly.setMap(map);
			map.setCenter( new google.maps.LatLng(center.x, center.y ));

	   }
	   
	   function pathing(){
    	 
    	  if ( gpath != null){
    		  
		   		gpath.setMap(null);
			if ( markersRuta.length < 2 ){
				
				return;	
			}	
    	  }
    	
    	var points = [];
		for( var i = 0 ; i < markersRuta.length ; i++){
			
			points.push( new google.maps.LatLng( markersRuta[i].position.lat(),  markersRuta[i].position.lng() ) );
			
			
			path[i] = new Point();
			path[i].setPoint( markersRuta[i].position.lat(),  markersRuta[i].position.lng() );
			
		}
		path.length = markersRuta.length;
		
		var color =  $('#color2').val(); 
		
		gpath = new google.maps.Polyline({
    	path: points,
    		strokeColor: color,
    		strokeOpacity: 1.0,
    		strokeWeight: 3
  		});
		gpath.setMap(ruta);
		

      }
      
	   function cleanArea(){
		   for( var i = 0 ; i < markers.length ; i++){
			   markers[i].setMap(null);
		   }
		   markers.length = 0;
		   
		   
	   }
	   
	    function cleanRuta(){
		   for( var i = 0 ; i < markersRuta.length ; i++){
			   markersRuta[i].setMap(null);
		   }
		   markersRuta.length = 0;
		   
		   
	   }
	   
	   
	   function changeColorArea( txtbox ){
			hulling();
	   }
	   
	   function changeColorRuta( txtbox ){
			pathing();
	   }
	   
	   
	   
	   
	   